<template>
  <div class="contact-page">
    <div class="container">
      <h1 class="page-title">{{ $t('routeTitles.contact-us') }}</h1>
      
      <div class="contact-content">
        <div class="contact-info">
          <el-card class="info-card">
            <template #header>
              <div class="card-header">
                <el-icon><Location /></el-icon>
                <span>公司地址</span>
              </div>
            </template>
            <div class="info-content">
              <p>浙江省温州市龙湾区永兴街道</p>
              <p>邮编：325024</p>
            </div>
          </el-card>
          
          <el-card class="info-card">
            <template #header>
              <div class="card-header">
                <el-icon><Phone /></el-icon>
                <span>联系电话</span>
              </div>
            </template>
            <div class="info-content">
              <p>销售部：+86 577 8888 8888</p>
              <p>技术部：+86 577 8888 8889</p>
            </div>
          </el-card>
          
          <el-card class="info-card">
            <template #header>
              <div class="card-header">
                <el-icon><Message /></el-icon>
                <span>电子邮箱</span>
              </div>
            </template>
            <div class="info-content">
              <p>sales@example.com</p>
              <p>support@example.com</p>
            </div>
          </el-card>
        </div>
        
        <div class="contact-form">
          <el-card>
            <template #header>
              <div class="card-header">
                <el-icon><Edit /></el-icon>
                <span>在线留言</span>
              </div>
            </template>
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="100px"
              class="form"
            >
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入您的姓名" />
              </el-form-item>
              
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入您的邮箱" />
              </el-form-item>
              
              <el-form-item label="电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入您的联系电话" />
              </el-form-item>
              
              <el-form-item label="主题" prop="subject">
                <el-select v-model="form.subject" placeholder="请选择联系主题">
                  <el-option label="产品咨询" value="product" />
                  <el-option label="技术支持" value="support" />
                  <el-option label="商务合作" value="business" />
                  <el-option label="其他" value="other" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="留言内容" prop="message">
                <el-input
                  v-model="form.message"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入您的留言内容"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">
                  提交留言
                </el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Location, Phone, Message, Edit } from '@element-plus/icons-vue'

const formRef = ref()

const form = reactive({
  name: '',
  email: '',
  phone: '',
  subject: '',
  message: ''
})

const rules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  subject: [
    { required: true, message: '请选择联系主题', trigger: 'change' }
  ],
  message: [
    { required: true, message: '请输入留言内容', trigger: 'blur' },
    { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
  ]
})

const submitForm = async (formEl) => {
  if (!formEl) return
  
  await formEl.validate((valid) => {
    if (valid) {
      // TODO: 实现表单提交逻辑
      console.log('提交表单', form)
      ElMessage.success('留言提交成功！')
      resetForm(formEl)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.contact-page {
  padding: 2rem 0;
  
  .page-title {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    font-size: 2rem;
  }
  
  .contact-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      
      .info-card {
        .card-header {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          color: var(--text-primary);
          
          .el-icon {
            font-size: 1.25rem;
            color: var(--primary-color);
          }
        }
        
        .info-content {
          color: var(--text-regular);
          line-height: 1.8;
        }
      }
    }
    
    .contact-form {
      .card-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-primary);
        
        .el-icon {
          font-size: 1.25rem;
          color: var(--primary-color);
        }
      }
      
      .form {
        max-width: 600px;
        margin: 0 auto;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .contact-page {
    padding: 1rem 0;
    
    .page-title {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    
    .contact-content {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
}
</style> 